<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="name" @keyup.enter="addItem" />
    </header>
    <!-- v-model="checkAll" -->

    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" :checked="isCheckAll"
        @change="checkAllItem(!isCheckAll)" />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li :class="{ completed: item.done }" v-for="(item, index) in showList">
          <div class="view">
            <input class="toggle" type="checkbox" :checked="item.done" @change="changStatus(!item.done, item.id)" />
            <label>{{ item.name }}</label>
            <button class="destroy" @click="delItem(item.id)"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>
        <!-- <li>
          <div class="view">
            <input class="toggle" type="checkbox" />
            <label>Buy a unicorn</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Rule the web" />
        </li> -->
      </ul>
    </section>

    <footer class="footer">
      <span class="todo-count"><strong>{{ leftCount }}</strong> item left</span>
      <ul class="filters">
        <!-- <li>
          <a class="selected" href="#/">All</a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li> -->
        <li v-for="(item, index) in  filters" @click.prevent="changeActiveItem(item)">
          <a :href="'#/' + item" :class="{ selected: item === active }">{{ item }}</a>
        </li>
      </ul>
      <button class="clear-completed" @click="clearCompletedItem">Clear completed</button>
    </footer>
  </section>

  <!-- <h1> {{ a }}</h1>
  <button @click="add"> 点击</button> -->
</template>




<!-- 修改状态
在 actions 中提供方法，store/modules/todos.js。 -->
<!-- 
删除任务
在 actions 中提供方法，store/modules/todo.js。 -->

<!-- 
添加任务
在 actions 中提供方法，store/modules/todo.js。 -->

<!-- 
全选反选
在 getters 中提供计算属性，在 actions 中提供方法，store/modules/todos.js。 -->
<!-- 
底部功能
在 getters 中提供计算属性，store/modules/todos.js。 -->
<script>

import store from './store/index'

import { storeToRefs } from 'pinia'

import { ref } from 'vue'
export default {
  setup () {
    const { todo } = store()
    const name = ref('')


    // console.log(todo);
    const { list, isCheckAll, leftCount,

      active,
      filters,
      showList
    } = storeToRefs(todo)


    const changStatus = (flag, id) => {
      // alert(flag)
      todo.changeDone(flag, id)
    }

    const delItem = (id) => {
      todo.delTodo(id)
    }

    //  {
    //               id: 1,
    //               name: '吃饭',
    //               done: false,
    //           },
    const addItem = () => {
      if (!name.value || !name.value.trim()) return alert('内容不能为空')
      todo.addTodo(name.value)
      name.value = ''
    }


    const checkAllItem = (flag) => {
      todo.checkAll(flag)
    }

    const clearCompletedItem = () => {
      todo.clearCompleted()
    }

    const changeActiveItem = (item) => {
      todo.changeActive(item)
    }

    todo.$subscribe(() => {
      // console.log(list.value);
      localStorage.setItem('todos', JSON.stringify(list.value))
      localStorage.setItem('active', active.value)

    })




    return {
      list,
      changStatus,
      delItem,
      addItem,
      name,
      isCheckAll,
      checkAllItem,
      clearCompletedItem,
      leftCount,
      active,
      filters,
      changeActiveItem,
      showList
    }
  }

}

</script>

<!--  进阶语法糖 -->
<!-- <script setup>
import { ref } from 'vue'
const a = ref(100);
const add = () => {
  a.value++
}
</script> -->
